﻿<div>
    <Divider Orientation="left">Normal</Divider>
    <Row>
        <Col Span="6" Order="4">
        1 col-order-4
        </Col>
        <Col Span="6" Order="3">
        2 col-order-3
        </Col>
        <Col Span="6" Order="2">
        3 col-order-2
        </Col>
        <Col Span="6" Order="1">
        4 col-order-1
        </Col>
    </Row>
    <Divider Orientation="left">Responsive</Divider>
    <Row>
        <Col Span="6" Xs="new EmbeddedProperty{ Order= 1 }" Sm="new EmbeddedProperty{ Order= 2 }" Md="new EmbeddedProperty{ Order= 3 }" Lg="new EmbeddedProperty{ Order= 4 }">
        1 col-order-responsive
        </Col>
        <Col Span="6" Xs="new EmbeddedProperty{ Order= 2 }"  Sm="new EmbeddedProperty{ Order= 1 }"  Md="new EmbeddedProperty{ Order= 4 }"  Lg="new EmbeddedProperty{ Order= 3 }" >
        2 col-order-responsive
        </Col>
        <Col Span="6" Xs="new EmbeddedProperty{ Order= 3 }"  Sm="new EmbeddedProperty{ Order= 4 }"  Md="new EmbeddedProperty{ Order= 2 }"  Lg="new EmbeddedProperty{ Order= 1 }" >
        3 col-order-responsive
        </Col>
        <Col Span="6" Xs="new EmbeddedProperty{ Order= 4 }"  Sm="new EmbeddedProperty{ Order= 3 }"  Md="new EmbeddedProperty{ Order= 1 }"  Lg="new EmbeddedProperty{ Order= 2 }" >
        4 col-order-responsive
        </Col>
    </Row>
</div>

<style>
    #components-grid-demo-flex-order [class~='ant-row'] {
        background: rgba(128, 128, 128, 0.08);
    }
</style>